<template>
	<view class="topContent boxShow bg-fff">
		<view class="topBtns">
			<block v-for="(tool, index) in userTools" :key="index">
				<view class="btnItem top-20 text-center" @click="userToolhandle(tool)">
					<block v-if="newMessage && tool.type === 'message'">
						<text class="point bg-error"></text>
					</block>
					<image class="iconImg" :src="tool.image" mode="aspectFit" />
					<view class="itemTxt top-10 font12">{{ tool.title }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useIndexStore } from '@/store/index';
import { checkLogin } from '@/common/common';
import { readMsgAPI } from '@/common/api';

const indexStore = useIndexStore();
const { newMessage } = storeToRefs(indexStore);

let userTools = ref([
	{
		title: "浏览历史",
		type: "history",
		route: "/pages/my/history/index",
		image: "https://image.srea.org.cn/xcx/icon/history_w.png"
	}, {
		title: "订阅/收藏",
		type: "subscribe",
		route: "/pages/my/subscribe/index",
		image: "https://image.srea.org.cn/xcx/icon/subscribe_w.png"
	}, {
		title: "活动报名",
		type: "signup",
		route: "/pages/my/sign-up/index",
		image: "https://image.srea.org.cn/xcx/icon/like_w.png"
	}, {
		title: "我的问答",
		type: "faq",
		route: "/pages/my/faq/index",
		image: "https://image.srea.org.cn/xcx/icon/message_w.png"
	}
])

//个人中心用户常用工具
function userToolhandle(item) {
	if (!checkLogin()) {
		uni.navigateTo({
			url: '/pages/login/login'
		})
		return
	}
	switch (item.type) {
		case "message":
			clickNewMessageBtn();
			break;

		default:
			uni.navigateTo({
				url: `${item.route}`
			})
	}
}

//最新消息
async function clickNewMessageBtn(){
	try{
		const {status, detail} = await readMsgAPI();
		if(status !== 0) {
			uni.$u.toast(detail);
			return;
		}
		indexStore.setNewMessage(false);
		uni.navigateTo({
			url: "/pages/my/new-message/newMessage"
		})
	}catch(err){
		uni.$u.toast(err)
	}
}
</script>

<style lang="scss" scoped>
.topContent {
	border-radius: 10rpx;
	padding-bottom: 40rpx;

	.topBtns {
		line-height: 1;

		.btnItem {
			width: 25%;
			display: inline-block;
			position: relative;

			.iconImg {
				width: 74rpx;
				height: 74rpx;
			}
		}
	}
}
</style>
